<template>
  <div class="app-container">
      <el-form ref="missionForm" :rules="rules" :model="missionForm" label-position="left" label-width="70px" style="margin-left:50px;">

        <el-form-item label="名称" prop="title">
          <el-input v-model="missionForm.title" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="missionForm.description" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="描述" />
        </el-form-item>
        <el-form-item label="席位">
          <el-input v-model="missionForm.dimension" />
        </el-form-item>
          
        <el-form-item label="开始任务">
          <el-select v-model="missionForm.started" placeholder="请选择">
            <el-option
              v-for="item in startedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
          
        <el-form-item label="活动性质">
          <el-radio-group v-model="missionForm.setting.type">
            <el-radio-button label="1" true-label="1" false-label="0" name="1">一次</el-radio-button>
            <el-radio-button label="2" true-label="2" false-label="0" name="2">每天</el-radio-button>
            <el-radio-button label="3" true-label="3" false-label="0" name="3">每周</el-radio-button>
            <el-radio-button label="4" true-label="4" false-label="0" name="4">每月</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker 
            v-model="missionForm.beginDate"
            align="right"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-time-picker
            arrow-control
            v-model="missionForm.beginTime" 
            value-format="HH:mm:ss"
            :picker-options="{
              selectableRange: '18:30:00 - 20:30:00'
            }"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="每天" v-if="Number(missionForm.setting.type) == 2">
          <el-row :gutter="20">
            <el-col :span="2"><div class="grid-content bg-purple">每隔</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple"><el-input v-model="missionForm.setting.interval" /></div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple">
          <el-select v-model="missionForm.setting.intervalUnit" placeholder="请选择">
            <el-option
              v-for="item in intervalUnitOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>发生一次</div></el-col>
          </el-row>
          
          
        </el-form-item>
        <el-form-item label="每周" v-if="Number(missionForm.setting.type) == 3">
          <el-row :gutter="20">
            <el-col :span="2"><div class="grid-content bg-purple">每隔</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple"><el-input v-model="missionForm.setting.interval" /></div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple">周发生一次</div></el-col>
          </el-row>
          <el-checkbox-group v-model="missionForm.setting.week">
            <el-checkbox label="星期日" name="0"></el-checkbox>
            <el-checkbox label="星期一" name="1"></el-checkbox>
            <el-checkbox label="星期二" name="2"></el-checkbox>
            <el-checkbox label="星期三" name="3"></el-checkbox>
            <el-checkbox label="星期四" name="4"></el-checkbox>
            <el-checkbox label="星期五" name="5"></el-checkbox>
            <el-checkbox label="星期六" name="6"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="月" v-if="Number(missionForm.setting.type) == 4">
          <el-checkbox-group v-model="missionForm.setting.month">
            <el-checkbox label="一月" name="1"></el-checkbox>
            <el-checkbox label="二月" name="2"></el-checkbox>
            <el-checkbox label="三月" name="3"></el-checkbox>
            <el-checkbox label="四月" name="4"></el-checkbox>
            <el-checkbox label="五月" name="5"></el-checkbox>
            <el-checkbox label="六月" name="6"></el-checkbox>
            <el-checkbox label="七月" name="7"></el-checkbox>
            <el-checkbox label="八月" name="8"></el-checkbox>
            <el-checkbox label="九月" name="9"></el-checkbox>
            <el-checkbox label="十月" name="10"></el-checkbox>
            <el-checkbox label="十一月" name="11"></el-checkbox>
            <el-checkbox label="十二月" name="12"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="按天" v-if="Number(missionForm.setting.type) == 4">
          <el-checkbox-group v-model="missionForm.setting.day">
            <el-checkbox label="1" name="1">01</el-checkbox>
            <el-checkbox label="2" name="2">02</el-checkbox>
            <el-checkbox label="3" name="3">03</el-checkbox>
            <el-checkbox label="4" name="4">04</el-checkbox>
            <el-checkbox label="5" name="5">05</el-checkbox>
            <el-checkbox label="6" name="6">06</el-checkbox>
            <el-checkbox label="7" name="7">07</el-checkbox>
            <el-checkbox label="8" name="8">08</el-checkbox>
            <el-checkbox label="9" name="9">09</el-checkbox>
            <el-checkbox label="10" name="1"></el-checkbox>
            <el-checkbox label="11" name="11"></el-checkbox>
            <el-checkbox label="12" name="12"></el-checkbox>
            <el-checkbox label="13" name="13"></el-checkbox>
            <el-checkbox label="14" name="14"></el-checkbox>
            <el-checkbox label="15" name="15"></el-checkbox>
            <el-checkbox label="16" name="16"></el-checkbox>
            <el-checkbox label="17" name="17"></el-checkbox>
            <el-checkbox label="18" name="18"></el-checkbox>
            <el-checkbox label="19" name="19"></el-checkbox>
            <el-checkbox label="20" name="20"></el-checkbox>
            <el-checkbox label="21" name="21"></el-checkbox>
            <el-checkbox label="22" name="22"></el-checkbox>
            <el-checkbox label="23" name="23"></el-checkbox>
            <el-checkbox label="24" name="24"></el-checkbox>
            <el-checkbox label="25" name="25"></el-checkbox>
            <el-checkbox label="26" name="26"></el-checkbox>
            <el-checkbox label="27" name="27"></el-checkbox>
            <el-checkbox label="28" name="28"></el-checkbox>
            <el-checkbox label="29" name="29"></el-checkbox>
            <el-checkbox label="30" name="30"></el-checkbox>
            <el-checkbox label="31" name="31"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="在" v-if="Number(missionForm.setting.type) == 4">
          <el-checkbox-group v-model="missionForm.setting.order">
            <el-checkbox label="1" name="0">第一个</el-checkbox>
            <el-checkbox label="2" name="1">第二个</el-checkbox>
            <el-checkbox label="3" name="2">第三个</el-checkbox>
            <el-checkbox label="4" name="3">第四个</el-checkbox>
            <el-checkbox label="5" name="4">最后一个</el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="missionForm.setting.order_week">
            <el-checkbox label="0" >星期日</el-checkbox>
            <el-checkbox label="1">星期一</el-checkbox>
            <el-checkbox label="2">星期二</el-checkbox>
            <el-checkbox label="3" >星期三</el-checkbox>
            <el-checkbox label="4" >星期四</el-checkbox>
            <el-checkbox label="5" >星期五</el-checkbox>
            <el-checkbox label="6" >星期六</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="操作" prop="scripts">
             <el-table
              :data="missionForm.scripts"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="程序或脚本"
                min-width="180">
              <template slot-scope="{row}">
                <span><el-input v-model="row.script" /></span>
              </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="参数"
                width="180">
              <template slot-scope="{row}">
                <span><el-input v-model="row.parameter" /></span>
              </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="参数2"
                width="180">
              <template slot-scope="{row}">
                <span><el-input v-model="row.begin" /></span>
              </template>
              </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="missionForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
        </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="saveMission()">
        确认
      </el-button>
      <el-button v-if="missionForm.status.value === 5" type="danger" @click="handleDelete(missionForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import {  saveMission, getMissionDetail, removeMissionByID } from '@/api/foundation/mission'


import waves from '@/directive/waves' // waves directive

export default {
  name: 'ComplexTable',
  components: {  },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      startedOptions:[
        {
          label:"登录时",
          value:1
        },
        {
          label:"启动时",
          value:2
        },
        {
          label:"空闲",
          value:3
        },
        {
          label:"发生事件时",
          value:4
        },
        {
          label:"创建/修改任务时",
          value:5
        },
        {
          label:"当连接到用户会话时",
          value:6
        },
        {
          label:"当从用户会话连接断开时",
          value:7
        }
      ],
      intervalUnitOptions:[
        {
          label:"秒",
          value:1
        },
        {
          label:"分钟",
          value:2
        },
        {
          label:"小时",
          value:3
        },
        {
          label:"天",
          value:4
        }
      ],
      missionForm: {
        ID: undefined,
        remark: '',
        beginDate:"",
        beginTime:"",
        scripts:[
          {
            script:"",
            parameter:"",
            begin:""
          }
        ],
        setting: {
          type:'1',
          week:[],
          month:[],
          day:[],
          interval:1,
          order:[],
          order_week:[]
        },
        title: '',
        status: {
          value:1
        }
      },
      rules: {
        beginDate: [{ required: true, message: '开始日期 is required', trigger: 'blur' }],
        beginTime: [{ required: true, message: '开始时间 is required', trigger: 'blur' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  watch:{
    "missionForm.setting.type"(missionType){
        console.log(missionType)
    },
    /*
    "missionForm.setting.order"(newVal){
        console.log(newVal)
        //月
        this.missionForm.setting.month = []
        //日
        this.missionForm.setting.day = []
    },
    "missionForm.setting.order_week"(newVal){
        console.log(newVal)
        //月
        this.missionForm.setting.month = []
        //日
        this.missionForm.setting.day = []
    },
    "missionForm.setting.month"(newVal){
        console.log(newVal)
        //按序列，周
        this.missionForm.setting.order = []
        this.missionForm.setting.order_week = []
    },
    "missionForm.setting.day"(newVal){
        console.log(newVal)
        //按序列，周
        this.missionForm.setting.order = []
        this.missionForm.setting.order_week = []
    }
    */
  },
  created() {
    let missionID = this.$route.query && this.$route.query.missionID
    if (missionID !== undefined) {
      missionID = parseInt(missionID)
      if (!isNaN(missionID)) {
        this.listLoading = true
        getMissionDetail({
          "missionID":missionID
        }).then(response => {
          if (response.status === 200) {
            this.missionForm = response.data
            console.log(this.missionForm)
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'mission' })
    },
    cleanMissionTask:function(missoinForm){
      let missionType = missoinForm.setting.type
      if(missionType == 2){
          //周序列
          this.missionForm.setting.week = []
          //月
          this.missionForm.setting.month = []
          //日
          this.missionForm.setting.day = []
          //按序列，周
          this.missionForm.setting.order = []
          this.missionForm.setting.order_week = []
      }
      if(missionType == 3){
          //月
          this.missionForm.setting.month = []
          //日
          this.missionForm.setting.day = []
          //按序列，周
          this.missionForm.setting.order = []
          this.missionForm.setting.order_week = []
      }
      if(missionType == 4){
          //周序列
          this.missionForm.setting.week = []
      }
    },
    saveMission() {
      let _this = this
      this.$refs['missionForm'].validate((valid) => {
        if (valid) {
          //刷新任务计划配置
          _this.cleanMissionTask(_this.missionForm)
          try {
            _this.missionForm.status = _this.missionForm.status.value;
            if(_this.missionForm.status == undefined){                
              _this.missionForm.status = 6
            }
          } catch (error) {
            _this.missionForm.status = 6;
          }
          if(_this.missionForm.hasOwnProperty('ID')){
            if(_this.missionForm.ID !== undefined){
              _this.missionForm.missionID = _this.missionForm.ID;
            }

          }
          _this.missionForm.setting = JSON.stringify(_this.missionForm.setting)
          _this.missionForm.scripts = JSON.stringify(_this.missionForm.scripts)
          saveMission(_this.missionForm).then((response) => {
          if (response.code === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'mission' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
          })
        }
      })
    },
    handleDelete(row, index) {
      removeMissionByID(row.identity).then((response) => {
          if (response.status === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'mission' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
